<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!--JSTL  -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>课程信息</title>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/css/bootstrap.min.css">

<!-- FontAwesome CSS -->
<link rel="stylesheet" href="css/css/font-awesome.min.css">

<!-- ElegantFonts CSS -->
<link rel="stylesheet" href="css/css/elegant-fonts.css">

<!-- themify-icons CSS -->
<link rel="stylesheet" href="css/css/themify-icons.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="css/css/swiper.min.css">

<!-- Styles -->
<link rel="stylesheet" href="style.css">
<style type="text/css">
.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: transparent;
	min-width: 130px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: #19c880;
}

.dropdown:hover .dropdown-content {
	display: block;
}
</style>
<style>
/* Make the image fully responsive */
.carousel-inner img {
	width: 100%;
	height: 100%;
}
</style>
</head>
<style>
.site-navigation ul li a {
	padding: 12px 30px;
}
</style>

</head>
<body class="single-courses-page">
	<div class="page-header">
		<header class="site-header">
			<div class="top-header-bar">
				<div class="container-fluid"></div>
				<!-- .container-fluid -->
			</div>
			<!-- .top-header-bar -->

			<div class="nav-bar">
				<div class="container">
					<div class="row">
						<div class="col-9 col-lg-3">
							<div class="site-branding">
								<h1 class="site-title">
									<a href="DeptMain.jsp" rel="home">Emp<span>Traning</span></a>
								</h1>
							</div>
							<!-- .site-branding -->
						</div>
						<!-- .col -->

						<div
							class="col-3 col-lg-9 flex justify-content-end align-content-center">
							<nav
								class="site-navigation flex justify-content-end align-items-center">
								<ul style="overflow: inherit;"
								class="flex flex-column flex-lg-row justify-content-lg-end align-content-center">
								<li ><a href="DeptMain.jsp">我的主页</a></li>
								<li class="current-menu-item"><a href="DeptCoursesShow.jsp">课程浏览</a></li>
								<li><a href="course-add.jsp">部门申请</a></li>
								<li><a href="emp-apl.jsp">员工申请</a></li>
								<li><a href="reftable.jsp">参培员工</a></li>
								<li><a href="DeptScore.jsp">员工成绩</a></li>
								<li>
									<div class="dropdown">
										<a href="DeptInfo.jsp" class="dropbtn">个人中心 <span
											id="down" class="fa fa-caret-down"
											style="margin-left: 10px; display: block;"></span> <span
											id="up" class="fa fa-caret-up"
											style="margin-left: 10px; display: none;"></span>
										</a>
										<div class="dropdown-content">
											<a href="DeptInfo.jsp">个人信息</a> <a href="#" id="Logout">退出登录</a>
										</div>
									</div>
								</li>

							</ul>
								
								
							</nav>
							<!-- .site-navigation -->
						</div>
						<!-- .col -->
					</div>
					<!-- .row -->
				</div>
				<!-- .container -->
			</div>
			<!-- .nav-bar -->
		</header>
		<!-- .site-header -->

		<div class="page-header-overlay">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<header class="entry-header">
							<h1 class="entry-title"><%=request.getParameter("courseName")%></h1>
							<input type="hidden" id="cpNo" name="cpNo"
								value="<%=request.getParameter("cpNo")%>">
						
							<!-- .ratings -->
						</header>
						<!-- .entry-header -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .page-header-overlay -->
	</div>
	<!-- .page-header -->

	<div class="container">
		<div class="row">
			<div class="col-12 offset-lg-1 col-lg-10">
				<div class="featured-image">
					<img src="<%=request.getParameter("coursePic")%>" alt="">
					<%
						String s = request.getParameter("courseStatus");
						String c = "";
						if (s.equals("1")) {
							c = "招募中";
						} else if (s.equals("2")) {
							c = "开课中";
						} else if (s.equals("3")) {
							c = "已结课";
						} else if (s.equals("4")) {
							c = "已取消";
						} else {
							c = "已满员";
						}
					%>
					<div class="course-cost"><%=c%></div>
				</div>
			</div>
			<!-- .col -->
		</div>
		<!-- .row -->

		<div class="row">
			<div class="col-12 offset-lg-1 col-lg-1">
				
			</div>
			<!-- .col -->

			<div class="col-12 col-lg-8">
				<div class="single-course-wrap">
					<div class="course-info flex flex-wrap align-items-center">
						<div class="course-author flex flex-wrap align-items-center mt-3">
							<img src=" <%=request.getParameter("teacherPic")%>" alt="">

							<div class="author-wrap">
								<label class="m-0">Teacher</label>
								<div class="author-name">
									<a href="#"> <%=request.getParameter("teacherName")%></a>
								</div>
							</div>
							<!-- .author-wrap -->
						</div>
						<!-- .course-author -->

						<div class="course-cats mt-3">
							<label class="m-0">Categories</label>
							<div class="author-name">
								<a href="#" id="subJectmsg"><%=request.getParameter("subJect")%></a>
							</div>
						</div>
						<!-- .course-cats -->

						<div class="course-students mt-3">
							<label class="m-0">最大人数</label>
							<div class="author-name">
								<a href="#"><%=request.getParameter("courseNum")%></a>
							</div>
						</div>
						<div class="course-students mt-3">
							<label class="m-0">现参加人数</label>
							<div class="author-name">
								<a href="#"><%=request.getParameter("courseNowNum")%></a>
							</div>
						</div>
						<!-- .course-students -->

						
						<!-- .buy-course -->
					</div>
					<!-- .course-info -->

					<div class="single-course-cont-section">
						<h2>课程简介：</h2>
						<ul class="p-0 m-0 green-ticked">

							<!-- 一个“。”句号分成一个li -->
							<%
								String str1 = request.getParameter("courseDesc");
								String[] str2 = str1.split("。");
								for (int i = 0; i < str2.length; i++) {
							%>
							<li><%=str2[i]%></li>
							<%
								}
							%>
						</ul>

						<h2>课程安排：</h2>

						<ul class="p-0 m-0 black-doted">
							<li>开始时间：<%=request.getParameter("courseStart")%></li>
							<li>结束时间：<%=request.getParameter("courseEnd")%></li>
							<li>上课时间：<%=request.getParameter("courseTime")%></li>
							<li>上课地点：<%=request.getParameter("coursePlace")%></li>
						</ul>

					</div>



					<div class="instructors-info">
						<header class="entry-heading">
							<h2 class="entry-title">教员信息</h2>
						</header>
						<!-- .entry-heading -->

						<div class="instructor-short-info flex flex-wrap">
							<div class="instructors-stats">
								<img src=" <%=request.getParameter("teacherPic")%>" alt="">

								<ul class="p-0 m-0 mt-3">
									<li><i class="fa fa-user"></i> <%=request.getParameter("teacherSex")%></li>
									<li><i class="fa fa-star"></i> <%=request.getParameter("teacherXl")%></li>
									<li><i class="fa fa-comment"></i> <%=request.getParameter("teacherTel")%></li>

								</ul>
							</div>
							<!-- .instructors-stats -->

							<div class="instructors-details">
								
								<!-- .ratings -->

								<h2 class="entry-title mt-3"><%=request.getParameter("courseName")%></h2>

								<div class="course-teacher mt-3">
									Teacher: <a href="#">Ms. <%=request.getParameter("teacherName")%></a>
								</div>
								<!-- .course-teacher -->

								<div class="entry-content mt-3">

									<p>
										简介：<%=request.getParameter("teacherDesc")%></p>
								</div>
								<!-- .entry-content -->
							</div>
							<!-- .instructors-details -->
						</div>
						<!-- .instructor-short-info -->
					</div>
					<!-- .instructors-info -->

					<div class="related-courses">
						<header
							class="entry-heading flex flex-wrap justify-content-between align-items-center">
							<h2 class="entry-title">相关类型课程</h2>

							<a
								href="DeptCoursesShow.jsp">查看所有</a>
						</header>
						<!-- .entry-heading -->
						<div class="row mx-m-25" id="rc" style="margin-bottom: 150px">

							<!-- 2个相关类型新闻 -->

						</div>
						<!-- .row -->
					</div>
					<!-- .related-course -->
				</div>
				<!-- .single-course-wrap -->
			</div>
			<!-- .col -->
			
		</div>
		<!-- .row -->
	</div>
		<footer class="site-footer">
		<div class="footer-widgets">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 col-lg-3">
						<h2 class="w-100">版权</h2>
						<div class="foot-about">
							<p class="footer-copyright">版权所有:bug总和我作队</p>
						</div>
						<!-- .foot-about -->
					</div>
					<!-- .col -->
					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
						<div class="foot-contact">
							<h2>联系我们</h2>

							<ul>
								<li>电子邮件：1727283192@qq.com</li>
								<li>电话：17606064136</li>
								<li>地址：福建省厦门市</li>
							</ul>
						</div>
						<!-- .foot-contact -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="quick-links flex flex-wrap">
							<h2 class="w-100">快速连接</h2>

							<ul class="w-50">
								<li><a href="about.html">关于 </a></li>
								<li><a href="#">使用条款</a></li>
								<li><a href="#">隐私政策 </a></li>
								<li><a href="#">联系我们</a></li>
							</ul>

						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="follow-us">
							<h2>关注我们的动向</h2>
							<img src="images/erweima.png">
						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .footer-widgets -->

	</footer>
	
	<!-- .container -->
	<!-- 隐藏域取值 -->
	<input type="hidden" value="${sessionScope.empNo}" id="getempNo">
	<input type="hidden" value="<%=request.getParameter("cpNo")%>" id="getcpNo">
	
	<script type='text/javascript' src='js/js/jquery.js'></script>
	<script type='text/javascript' src='js/js/swiper.min.js'></script>
	<script type='text/javascript' src='js/js/masonry.pkgd.min.js'></script>
	<script type='text/javascript' src='js/js/jquery.collapsible.min.js'></script>
	<script type='text/javascript' src='js/js/custom.js'></script>
	<script src="js/jquery-2.0.3.js"></script>
	<script src="layui/layui.all.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>

	<script>
		$(".dropdown").mouseover(function() {
			$("#down").css('display', 'none');
			$("#up").css('display', 'block');
		});
		$(".dropdown").mouseout(function() {
			$("#down").css('display', 'block');
			$("#up").css('display', 'none');
		});
	</script>

	<script>
		$(function() {
			//课程类型
			$
					.get(
							"CCPTServlet?op=queryByPage1&keywords="
									+ $("#subJectmsg").text(),
							function(data) {
								var i = 0;
								$
										.each(
												$.parseJSON(data),
												function(index, rc) {
													if (rc.cpNo != $("#cpNo")
															.val()
															&& i < 2) {
														console.log(rc.cpNo);
														console.log($("#cpNo")
																.val());
														i++;
														$("#rc")
																.append(
																		"<div class='col-12 col-md-6 px-25'>"
																				+ "<div class='course-content'>"
																				+ "<figure class='course-thumbnail'>"
																				+ "<a href='#'><img src='"+rc.coursePic+"'alt=''></a>"
																				+ "</figure>"
																				+ "<div class='course-content-wrap'>"
																				+ "<header class='entry-header'>"
																				+ "<h2 class='entry-title'>"
																				+ "<a href='SingleCourses.jsp?"
																				+ "courseName="
																				+ rc.courseName
																				+ "&cpNo="
																				+ rc.cpNo
																				+ "&coursePic="
																				+ rc.coursePic
																				+ "&courseStatus="
																				+ rc.courseStatus
																				+ "&subJect="
																				+ rc.subJect
																				+ "&teacherPic="
																				+ rc.teacherPic
																				+ "&teacherName="
																				+ rc.teacherName
																				+ "&courseNum="
																				+ rc.courseNum
																				+ "&courseDesc="
																				+ rc.courseDesc
																				+ "&courseStart="
																				+ rc.courseStart
																				+ "&courseEnd="
																				+ rc.courseEnd
																				+ "&courseTime="
																				+ rc.courseTime
																				+ "&coursePlace="
																				+ rc.coursePlace
																				+ "&teacherXl="
																				+ rc.teacherXl
																				+ "&teacherSex="
																				+ rc.teacherSex
																				+ "&teacherTel="
																				+ rc.teacherTel
																				+ "&teacherDesc="
																				+ rc.teacherDesc
																				+ "'>"
																				+ rc.courseName
																				+ "</a>"
																				+ "</h2>"
																				+ "<div class='entry-meta flex flex-wrap align-items-center'>"
																				+ "<div class='course-author'>"
																				+ "<a href='#'>Ms."
																				+ rc.teacherName
																				+ "</a>"
																				+ "</div>"
																				+ "<div class='course-date'>"
																				+ rc.courseStart
																				+ "</div>"
																				+ "</div>"
																				+ "</header>"
																				+ "<footer class='entry-footer flex flex-wrap justify-content-between align-items-center'>"
																				+ "<div class='course-cost'>"
																				+ rc.subJect
																				+ "</div>"
																				+ "</footer>"
																				+ "</div>"
																				+ "</div>"
																				+ "</div>");
													}
												});
							});
		});
	</script>
	<script>
		$("#PerCourseByEmp").click(function() {
			var empNo = $("#getempNo").val();
			var cpNo = $("#getcpNo").val();
			console.log("empNo:" + empNo)
			layer.confirm("确定申请该门课程吗？", {
				btn : [ '确定', '取消' ]
			}, function() {
				$.ajax({
					url : "PerCourseServlet ",
					type : "post",
					data : {
						empNo : empNo,
						cpNo : cpNo,
						op : "addPerCourseByEmp"
					},
					success : function(data) {
						if (data == true) {
							layer.msg('申请成功！', {
								icon : 1,
								time : 2000

							});

						} else {
							layer.msg('申请失败！你已参加该课程！', {
								icon : 1,
								time : 2000
							});
						}
					},
					dataType : "json"
				});

			});
		});
	</script>
	
	<script>
	//var cpNo = $("#cpNo").val();
	var cpNo = 1;
	$(function(){
		$.get("RefTableServlet?op=ajaxCountReq&cpNo="+cpNo,function(data){
			$("#count").append(data);
		});
	});
	</script>
	<!--退出登录-->
	<script>
		layui.use([ 'layer' ],function() {
			$ = layui.jquery;//jquery
			layer = layui.layer;//弹出层
			$("#Logout").click(function() {
					layer.confirm('确认要退出登录吗？',function(index) {
						$.ajax({
							url : "LoginServlet",
							type : "get",
							data : {
								op1:"logout"
							},
							success : function(data) {
								if (data.code == 1) {
									location.href = "http://localhost:8080/EmpTrainingTest/Login.jsp";
									return false;
								} 
							},
							dataType : "json"
						});	
					});
				});
			});
	</script>
</body>
</html>